<template>
  <div class="avue-top">
    <div class="top-bar__right">
      <el-tooltip v-if="showDebug"
                  effect="dark"
                  :content="logsFlag?'没有错误日志':`${logsLen}条错误日志`"
                  placement="bottom">
        <div class="top-bar__item">
          <top-logs></top-logs>
        </div>
      </el-tooltip>
      <img :src="`${publicPath}img/user-white.png`"
           style="width:18px;position: relative;
                    left: 0;
                    top: 1.55px;">
      <!--<i class="iconuser"></i>-->
      <span style="color: #fff;font-size: 18px;margin-left: 9px;">
        <!--        <el-dropdown trigger="click">-->
        <span class="el-dropdown-link"
              @click="loginTo">
          注册/登录
          <!--                <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        </span>
        <!--              <el-dropdown-menu slot="dropdown" style="margin-top:-15px;">-->
        <!--                &lt;!&ndash;<el-dropdown-item>项目单位法人登录</el-dropdown-item>&ndash;&gt;-->
        <!--                &lt;!&ndash;<el-dropdown-item>个人登录</el-dropdown-item>&ndash;&gt;-->
        <!--                <el-dropdown-item @click.native="loginTo()">政府用户登录</el-dropdown-item>-->
        <!--              </el-dropdown-menu>-->
        <!--            </el-dropdown>-->
      </span>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { fullscreenToggel, listenfullscreen, handleImg } from "@/util/util";
import logo from "../logo";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topSetting from "./top-setting";
export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topSetting
  },
  name: "top",
  data () {
    return {
      publicPath: process.env.BASE_URL,
      showDebug: false,
      showTheme: true,
      showLock: false,
      showFullScren: true,
      showCollapse: false,
      showSearch: false,
      showMenu: false,
      showColor: true
    };
  },
  filters: {},
  created () {
  },
  mounted () {
    listenfullscreen(this.setScreen);
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag"
    ])
  },
  methods: {
    handleScreen () {
      fullscreenToggel();
    },
    setCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen () {
      this.$store.commit("SET_FULLSCREN");
    },
    loginTo () {
      this.$router.push({ path: "/login" });
    },
    logout () {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.avue-top {
  color: rgba(0, 0, 0, 0.65);
  font-size: 28px;
  height: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
.top-bar__right {
  height: 64px;
  float: right;
  top: -6px;
}
.top-label {
  color: #fff;
  font-size: 16px;
  display: inline-block;
  line-height: 35px;
  margin-left: 6px;
  margin-right: 12px;
}
.el-dropdown-link {
  font-size: 16px;
  float: left;
  margin-top: 8px;
}
</style>
<style>
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #ffffff;
  font-size: 14px;
}
</style>
